Tower-pattern HTML Mikmak webwinkel

Een repetitieve html structuur, flexibel genoeg om in verschillende contexten toegepast te kunnen worden, vergemakkelijkt het implementeren van de wireframes.
HTML structuur

We passen het tower-pattern toe op de Admin Index pagina van de webwinkel. Elke tegel in de showroom klasse heeft een masker dat wordt aangegeven door de mask css klasse.
<body>
<div class="logo"></div>
<div id="tower">
    <div class="floor" id="first-floor">
        <div class="control-panel">
            <a href="#" class="tile _14x1">
                <span class="icon-menu2"></span>
                <span class="screen-reader-text">Home</span>
            </a>
            <h1>Mikmak</h1>
        </div>
        <div class="show-room">
            <div class="tile hover">
                <a href="Product/Editing" class="mask fade-in-left">
                    <h2>Producten editen</h2>

                    <p>Producten die in de webwinkel te koop zijn inserten, updaten en deleten.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Producten</h1>

                <p>Editen</p>
            </div>
            <div class="tile hover">
                <a href="Supplier/Editing" class="mask fade-in-left">
                    <h2>Leveranciers editen</h2>

                    <p>Leveranciers inserten, updaten en deleten.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Leveranciers</h1>

                <p>Editen</p>
            </div>
            <div class="tile hover">
            </div>
            <div class="tile hover">
            </div>
            <div class="tile hover">
                <a href="Customer/Editing" class="mask fade-in-left">
                    <h2>Klanten editen</h2>

                    <p>Klanten inserten, updaten en deleten.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Klanten</h1>

                <p>Editen</p>
            </div>
            <div class="tile hover">
            </div>
            <div class="tile hover">
                <a href="Order/Editing" class="mask fade-in-left">
                    <h2>Bestellingen editen</h2>

                    <p>Bestellingen van klanten inserten, updaten en deleten.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Bestellingen</h1>

                <p>Editen</p>
            </div>
            <div class="tile hover">
                <a href="OrderItems/Editing" class="mask fade-in-left">
                    <h2>Bestellingitems editen</h2>

                    <p>Bestellingitems statistieken.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Bestellingitems</h1>

                <p>Editen</p>
            </div>
            <div class="tile hover">
                <a href="Category/Editing" class="mask fade-in-left">
                    <h2>Categorieën editen</h2>

                    <p>Categorie voor producten die in de webwinkel te koop zijn inserten, updaten en deleten.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Categorieën</h1>

                <p>Editen</p>
            </div>
            <div class="tile hover">
                <a href="Country/Editing" class="mask fade-in-left">
                    <h2>Landen editen</h2>

                    <p>Landen inserten, updaten en deleten.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Landen</h1>

                <p>Editen</p>
            </div>
            <div class="tile hover">
                <a href="OrderStatus/Editing" class="mask fade-in-left">
                    <h2>Orderstatus editen</h2>

                    <p>Orderstatus inserten, updaten en deleten.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Orderstatus</h1>

                <p>Editen</p>
            </div>
            <div class="tile hover">
                <a href="UnitBase/Editing" class="mask fade-in-left">
                    <h2>Basiseenheid editen</h2>

                    <p>Basiseenheid voor producten inserten, updaten en deleten.</p>
                    <span class="action">Kiezen</span>
                </a>

                <h1>Basiseenheid</h1>

                <p>Editen</p>
            </div>

        </div>
    </div>
    <footer>
        <p class="copy">concept & design - Entreprise de Modes et de Manières Modernes 2012-2015<br></p>

        <p><a href="Home/AdminIndex">Beheer</a></p>

        <div class="vcard">
            <h3>Contact</h3>

            <p class="fn org">a n<span>orm</span> apart</p>

            <div class="adr">
                <div class="street-address">Braziliëstraat 38</div>
                <div class="postal-code">2000</div>
                <div class="locality">Antwerpen</div>
                <div class="country-name">België</div>
                <div class="email">
                    <a href="mailto:jef.inghelbrecht@inantwerpen.com">jef.inghelbrecht@inantwerpen.com</a>
                </div>
            </div>
        </div>
    </footer>
</div>
</body>
Mikmak Admin Index pagina niet opgemaakt
2018-01-12 13:57:02